關於這一篇的 前置關聯部分 請看 Day13

好，接下來 我們要考慮 當公司點擊之後 要發生的事情
還有 要把討論組資料讀取進來

當我們接收到 公司點擊之後 要做值的改變
我們有三個地方要去更新

1. localStorage
2. redux Tree
3. 後台的資料庫

export const ChangeCurrentComp = (_compItem, _userid, _token) => {

	var formData = new FormData();
	formData.append("token", _token);
	formData.append("CompID", _compItem.get('CompID'));
	formData.append("UserID", _userid);

	return (dispatch) => {
		fetch("http://xxx.xxx.xxx/set_user_default_compid", {
				method: "POST",
				body: formData
			})
			.then(function(response) {
				return response.json();
			})
			.then(function(jsonData) {
				console.log(jsonData);
				let _currentComp = {
					'CompID': _compItem.get('CompID'),
					'IsActive': _compItem.get('IsActive'),
					'LogoPath': _compItem.get('LogoPath'),
					'ShortName': _compItem.get('ShortName'),
					'TimeZone': _compItem.get('TimeZone'),
				};
				dispatch({
					type: Update_Current_Comp,
					payload: {
						CurrentComps: _currentComp
					}
				});
				dispatch({
					type: Update_Comp_Modal_IsOpen,
					payload: {
						IsOpen: false
					}
				});
				// 設定localStorage 資料
				localStorage.setItem("CurrentUser", JSON.stringify({
					'CompID': _compItem.get('CompID'),
					'UserID': _userid,
					'LastName': '',
					'FirstName': ''
				}));
			})
	}
};

這沒什麼 只是每個邏輯要顧到一下
再來 剛剛的 modal 你要去控制它開啟或關閉的事情
所以你也要寫一個 action 去控制

export const ChangeIsOpenCompModal = (_isopen) => {
	return (dispatch) => {
		dispatch({
			type: Update_Comp_Modal_IsOpen,
			payload: {
				IsOpen: _isopen
			}
		});
	}
};

好 來看重頭戲
討論組列表的部分
先拿資料

export const GetUserAccessDiscs = (_compid, _userid, _token) => {

	var formData = new FormData();
	formData.append("token", _token);
	formData.append("CompID", _compid);
	formData.append("UserID", _userid);

	return (dispatch) => {
		fetch("http://xx.xxx.xxx/comp/get_user_access_discs", {
				method: "POST",
				body: formData
			})
			.then(function(response) {
				return response.json();
			})
			.then(function(jsonData) {
				// 過濾掉 IsActive != true 的討論組資料
				let _allDiscs = jsonData.data.filter(function(_ele) {
					return _ele.discussion_info != null
				});
				// 設定當前要的公司資料
				dispatch({
					type: Insert_User_Access_Disc,
					payload: {
						AllDiscs: _allDiscs
					}
				});
			})
			.catch(function(e) {
				console.log(e);
			})
	}
};

container 要串起來

(state) => ({ 
    ...
    AllDiscs: state.getIn(['InitReducer', 'AllDiscs'])
}),

ＯＫ 最後來看View

<MenuItem 
  style={styles.menuItem}
  primaryText={"我的信箱"}
  secondaryText={"0"}
  leftIcon={<Icon color='blue' name='user' size='large' />}
/>
<Divider inverted style={{'margin':'0'}}></Divider>
<MenuItem 
  style={styles.menuItem}
  primaryText={"收藏匣"}
  secondaryText={"0"}
  leftIcon={<Icon color='yellow' name='star' size='large' />}
/>
<Divider inverted style={{'margin':'0'}}></Divider>
<MenuItem 
  style={styles.menuItem}
  primaryText={"草稿匣"}
  secondaryText={"0"}
  leftIcon={<Icon color='brown' name='write' size='large' />}
/>
<Divider inverted style={{'margin':'0'}}></Divider>
{/*一般討論組*/}
<div style={{'textAlign':'left', 'padding':'8px 0 8px 8px'}}>
  <Icon color='grey' name='tasks' size='large' />
  <span style={{'color':'white', 'fontSize': '16px'}}>公司訊息</span>
</div>
{
  this.props.AllDiscs.map(function(_disc, _index){
    if (_disc.getIn(['discussion_info', 'DiscType']) == 2) {
      return (
        <MenuItem key={_index}
                  style={styles.menuItem}
                  primaryText={_disc.getIn(['discussion_info','DiscName'])}
                  secondaryText={
                    _disc.getIn(['discussion_info', 'SubjCT']) == undefined ? "":_disc.getIn(['discussion_info', 'SubjCT']).toString()
                  }
        />
      )
    }
  }, this)
}

一個重點 我的secondaryText 是放這個討論組裡面 有多少篇的主題
But 這個數字可能是0

_disc.getIn(['discussion_info', 'SubjCT']) == undefined ? "":_disc.getIn(['discussion_info', 'SubjCT']).toString()

所以 要先判斷 他是不是undefined 再來做toString() 的轉換

好 最後 我們在完成一部分後 就執行 npm run build
然後 發現了一個錯誤 rhs is undefined ...

所以 我們更改了 package.json

"devDependencies": {
"redux-logger": "3.0.1",
}

記得要執行 npm install 就不會有問題囉！